<template>
  <div id="profile" @click="sortOpen=false">
    <navigation index="0" userinfo="https://cn.vuejs.org/images/logo.svg"></navigation>
    <profileHeader mode="0"></profileHeader>
    <div class="posts">
      <div class="posts-header">
        <p>我的帖子</p>
        <div class="posts-header-sort" :class="sortOpen ? 'open-sort' :''">
          <p>按{{ order == 0 ? '时间' : '热度' }}排序</p>
          <svg @click.stop="sortOpen=true" t="1644068465700" class="icon" viewBox="0 0 1024 1024" version="1.1"
               xmlns="http://www.w3.org/2000/svg"
               p-id="7325" width="20" height="20">
            <path
                d="M800.256 741.888l47.616-47.616a31.744 31.744 0 0 1 45.056 45.056l-102.4 102.4a31.744 31.744 0 0 1-54.272-22.528V204.8a32.256 32.256 0 0 1 64 0zM153.6 237.056a32.256 32.256 0 0 1 0-64h460.8a32.256 32.256 0 0 1 0 64z m0 307.2a32.256 32.256 0 0 1 0-64h460.8a32.256 32.256 0 0 1 0 64z m0 307.2a32.256 32.256 0 0 1 0-64h460.8a32.256 32.256 0 0 1 0 64z"
                fill="#999999" p-id="7326"></path>
          </svg>
          <ul>
            <li :class="order == 0 ? 'sort-active':''" @click="getPosts(0)">发布时间</li>
            <li :class="order == 1 ? 'sort-active':''" @click="getPosts(1)">热度</li>
          </ul>
        </div>
      </div>
      <div class="post" v-for="(item,index) in posts">
        <div class="post-header">
          <p class="post-title">{{ item.title }}</p>
          <p class="post-time">{{ item.createTime }}</p>
        </div>
        <div class="post-content">
          <div class="post-image" v-if="item.image">
            <img :src="item.image" alt="">
          </div>
          <p class="post-text">
            {{ item.content ? item.content.slice(0, 100) + '...' : '' }}
            <a @click="handleReadPost(item.id)">查看详情
              <svg t="1644147643709" class="icon" viewBox="0 0 1024 1024" version="1.1"
                   xmlns="http://www.w3.org/2000/svg"
                   p-id="8340" width="16" height="16">
                <path
                    d="M584.533333 512l-302.933333 302.933333L341.333333 874.666667l302.933334-302.933334 59.733333-59.733333-59.733333-59.733333L341.333333 145.066667 281.6 209.066667l302.933333 302.933333z"
                    fill="#3981FF" p-id="8341"></path>
              </svg>
            </a>
          </p>
        </div>
        <div class="post-footer">
          <div class="post-operation">
            <div class="post-operation-heat">
              <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 19 27">
                <path class="a" style="fill:#f64e54"
                      d="M201.519,91a9.5,9.5,0,0,1-8.831-5.947,9.362,9.362,0,0,1,2.322-10.332c1.7-1.586,5.875-4.442,5.242-10.721,7.6,5.023,11.4,10.047,3.8,17.581,1.267,0,3.167,0,6.334-3.1A9.169,9.169,0,0,1,201.519,91Z"
                      transform="translate(-192.019 -64)"/>
              </svg>
              <p>{{ item.hot }}</p>
            </div>
            <div class="post-operation-commit">
              <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24">
                <path class="a" style="fill:#3981ff"
                      d="M97.333,85.333a12,12,0,1,1-6.163,22.3q-.281-.167-.564-.331l-2.936.8a.9.9,0,0,1-1.1-1.105l.8-2.933c-.31-.526-.512-.878-.613-1.066A12,12,0,0,1,97.333,85.333ZM94.458,100.8a.9.9,0,0,0-1.151,1.384,6.3,6.3,0,0,0,8.05,0,.9.9,0,1,0-1.151-1.384,4.5,4.5,0,0,1-5.749,0Z"
                      transform="translate(-85.333 -85.333)"/>
              </svg>
              <p>{{ item.count }}</p>
            </div>
          </div>
          <div class="post-del" @click="handleDelPost(item.id)">
            <svg t="1644148463593" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
                 p-id="9441" width="18" height="18">
              <path
                  d="M607.897867 768.043004c-17.717453 0-31.994625-14.277171-31.994625-31.994625L575.903242 383.935495c0-17.717453 14.277171-31.994625 31.994625-31.994625s31.994625 14.277171 31.994625 31.994625l0 351.94087C639.892491 753.593818 625.61532 768.043004 607.897867 768.043004z"
                  p-id="9442" fill="#999999"></path>
              <path
                  d="M415.930119 768.043004c-17.717453 0-31.994625-14.277171-31.994625-31.994625L383.935495 383.935495c0-17.717453 14.277171-31.994625 31.994625-31.994625 17.717453 0 31.994625 14.277171 31.994625 31.994625l0 351.94087C447.924744 753.593818 433.647573 768.043004 415.930119 768.043004z"
                  p-id="9443" fill="#999999"></path>
              <path
                  d="M928.016126 223.962372l-159.973123 0L768.043004 159.973123c0-52.980346-42.659499-95.983874-95.295817-95.983874L351.94087 63.989249c-52.980346 0-95.983874 43.003528-95.983874 95.983874l0 63.989249-159.973123 0c-17.717453 0-31.994625 14.277171-31.994625 31.994625s14.277171 31.994625 31.994625 31.994625l832.032253 0c17.717453 0 31.994625-14.277171 31.994625-31.994625S945.73358 223.962372 928.016126 223.962372zM319.946246 159.973123c0-17.545439 14.449185-31.994625 31.994625-31.994625l320.806316 0c17.545439 0 31.306568 14.105157 31.306568 31.994625l0 63.989249L319.946246 223.962372 319.946246 159.973123 319.946246 159.973123z"
                  p-id="9444" fill="#999999"></path>
              <path
                  d="M736.048379 960.010751 288.123635 960.010751c-52.980346 0-95.983874-43.003528-95.983874-95.983874L192.139761 383.591466c0-17.717453 14.277171-31.994625 31.994625-31.994625s31.994625 14.277171 31.994625 31.994625l0 480.435411c0 17.717453 14.449185 31.994625 31.994625 31.994625l448.096758 0c17.717453 0 31.994625-14.277171 31.994625-31.994625L768.215018 384.795565c0-17.717453 14.277171-31.994625 31.994625-31.994625s31.994625 14.277171 31.994625 31.994625l0 479.231312C832.032253 916.835209 789.028725 960.010751 736.048379 960.010751z"
                  p-id="9445" fill="#999999"></path>
            </svg>
            <p>删除</p>
          </div>
        </div>
      </div>
      <div class="infinite-scroll" v-show="loading">
        <svg t="1645168732350" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
             p-id="6189" width="32" height="32">
          <path
              d="M876.864 782.592c3.264 0 6.272-3.2 6.272-6.656 0-3.456-3.008-6.592-6.272-6.592-3.264 0-6.272 3.2-6.272 6.592 0 3.456 3.008 6.656 6.272 6.656z m-140.544 153.344c2.304 2.432 5.568 3.84 8.768 3.84a12.16 12.16 0 0 0 8.832-3.84 13.76 13.76 0 0 0 0-18.56 12.224 12.224 0 0 0-8.832-3.84 12.16 12.16 0 0 0-8.768 3.84 13.696 13.696 0 0 0 0 18.56zM552.32 1018.24c3.456 3.648 8.32 5.76 13.184 5.76a18.368 18.368 0 0 0 13.184-5.76 20.608 20.608 0 0 0 0-27.968 18.368 18.368 0 0 0-13.184-5.824 18.368 18.368 0 0 0-13.184 5.76 20.608 20.608 0 0 0 0 28.032z m-198.336-5.76c4.608 4.8 11.072 7.68 17.6 7.68a24.448 24.448 0 0 0 17.536-7.68 27.456 27.456 0 0 0 0-37.248 24.448 24.448 0 0 0-17.536-7.68 24.448 24.448 0 0 0-17.6 7.68 27.52 27.52 0 0 0 0 37.184z m-175.68-91.84c5.76 6.08 13.824 9.6 21.952 9.6a30.592 30.592 0 0 0 22.016-9.6 34.368 34.368 0 0 0 0-46.592 30.592 30.592 0 0 0-22.016-9.6 30.592 30.592 0 0 0-21.952 9.6 34.368 34.368 0 0 0 0 46.592z m-121.152-159.36c6.912 7.36 16.64 11.648 26.368 11.648a36.736 36.736 0 0 0 26.432-11.584 41.28 41.28 0 0 0 0-55.936 36.736 36.736 0 0 0-26.432-11.584 36.8 36.8 0 0 0-26.368 11.52 41.28 41.28 0 0 0 0 56zM12.736 564.672a42.88 42.88 0 0 0 30.784 13.44 42.88 42.88 0 0 0 30.784-13.44 48.128 48.128 0 0 0 0-65.216 42.88 42.88 0 0 0-30.72-13.44 42.88 42.88 0 0 0-30.848 13.44 48.128 48.128 0 0 0 0 65.216z m39.808-195.392a48.96 48.96 0 0 0 35.2 15.36 48.96 48.96 0 0 0 35.2-15.36 54.976 54.976 0 0 0 0-74.56 48.96 48.96 0 0 0-35.2-15.424 48.96 48.96 0 0 0-35.2 15.424 54.976 54.976 0 0 0 0 74.56zM168.32 212.48c10.368 11.008 24.96 17.408 39.68 17.408 14.592 0 29.184-6.4 39.552-17.408a61.888 61.888 0 0 0 0-83.84 55.104 55.104 0 0 0-39.616-17.408c-14.656 0-29.248 6.4-39.616 17.408a61.888 61.888 0 0 0 0 83.84zM337.344 124.8c11.52 12.16 27.712 19.264 43.968 19.264 16.256 0 32.448-7.04 43.968-19.264a68.672 68.672 0 0 0 0-93.184 61.248 61.248 0 0 0-43.968-19.264 61.248 61.248 0 0 0-43.968 19.264 68.736 68.736 0 0 0 0 93.184z m189.632-1.088c12.672 13.44 30.528 21.248 48.448 21.248s35.712-7.808 48.384-21.248a75.584 75.584 0 0 0 0-102.464A67.392 67.392 0 0 0 575.36 0c-17.92 0-35.776 7.808-48.448 21.248a75.584 75.584 0 0 0 0 102.464z m173.824 86.592c13.824 14.592 33.28 23.104 52.736 23.104 19.584 0 39.04-8.512 52.8-23.104a82.432 82.432 0 0 0 0-111.744 73.472 73.472 0 0 0-52.8-23.168c-19.52 0-38.912 8.512-52.736 23.168a82.432 82.432 0 0 0 0 111.744z m124.032 158.528c14.976 15.872 36.032 25.088 57.216 25.088 21.12 0 42.24-9.216 57.152-25.088a89.344 89.344 0 0 0 0-121.088 79.616 79.616 0 0 0-57.152-25.088c-21.184 0-42.24 9.216-57.216 25.088a89.344 89.344 0 0 0 0 121.088z m50.432 204.032c16.128 17.088 38.784 27.008 61.632 27.008 22.784 0 45.44-9.92 61.568-27.008a96.256 96.256 0 0 0 0-130.432 85.76 85.76 0 0 0-61.568-27.072c-22.848 0-45.44 9.984-61.632 27.072a96.192 96.192 0 0 0 0 130.432z"
              fill="#3981FF" p-id="6190"></path>
        </svg>
        <span class="infinite-scroll-text">努力加载中...</span>
      </div>
      <div class="end infinite-scroll" v-show="end">
        <p>到底了</p>
      </div>
      <div class="is-null-content" ref="null">
        <img :src="nullImg" alt="">
        <p>你还没有发布帖子</p>
        <router-link to="release">
          <p>立即发布</p>
          <svg t="1644147643709" class="icon" viewBox="0 0 1024 1024" version="1.1"
               xmlns="http://www.w3.org/2000/svg"
               p-id="8340" width="16" height="16">
            <path
                d="M584.533333 512l-302.933333 302.933333L341.333333 874.666667l302.933334-302.933334 59.733333-59.733333-59.733333-59.733333L341.333333 145.066667 281.6 209.066667l302.933333 302.933333z"
                fill="#3981FF" p-id="8341"></path>
          </svg>
        </router-link>
      </div>
    </div>
    <publicFooter></publicFooter>
  </div>
</template>
<script>
import navigation from "@/components/navigation";
import publicFooter from "@/components/publicFooter";
import profileHeader from "@/components/profileHeader";
import router from "../../router";

export default {
  name: "index",
  data() {
    return {
      nullImg: import("../../assets/null.png"),
      sortOpen: false,
      posts: [],
      order: 0,
      page: 1,
      loading: false,
      isAchiveBottom: false,
      end: false
    }
  },
  created() {
    window.onscroll = () => {
      let scrollTop =
          document.documentElement.scrollTop || document.body.scrollTop;
      let windowHeight =
          document.documentElement.clientHeight || document.body.clientHeight;
      let scrollHeight =
          document.documentElement.scrollHeight || document.body.scrollHeight;
      if (scrollTop + windowHeight >= scrollHeight - 200 && !this.isAchiveBottom) {
        this.isAchiveBottom = true;
        this.loading = true
        this.end = false
        this.Request('get', '/v1/posts/user', {
          page: this.page++,
          order: this.order
        }).then(res => {
          if (res.data.length == 0) {
            this.end = true
            window.onscroll = ''
          } else {
            this.posts = [...this.posts, ...res.data]
          }
          this.isAchiveBottom = false;
          this.loading = false;
        })
      }
    };
  },
  mounted() {
    this.nullImg.then(res => {
      this.nullImg = res.default
    })
    this.Request('get', '/v1/posts/user', {
      page: 1
    }).then(res => {
      if (res.data.length == 0) {
        this.$refs.null.style.display = 'flex'
      }
      this.posts = res.data
    })
  },
  methods: {
    handleReadPost: function (id) {
      sessionStorage.setItem('postId', id)
      router.push('details')
    },
    handleDelPost: function (id) {
      this.Request('delete', '/v1/posts', {
        id: id
      }).then(res => {
        if (res.code == '200') {
          router.go(0)
        }
      })
    },
    getPosts: function (order) {
      this.order = order
      this.Request('get', '/v1/posts', {
        page: this.page,
        order: this.order
      }).then(res => {
        if (res.data.length == 0) {
          this.$refs.null.style.display = 'flex'
        }
        this.posts = res.data
      })
    },
  },
  components: {
    navigation,
    publicFooter,
    profileHeader
  }
}
</script>
<style lang="less">
#profile {
  .posts {
    width: 1200px;
    margin: 28px auto 200px;
    background: #fff;
    padding: 20px 20px 30px;
    border-right: 5px;
    border-radius: 5px;
  }

  .is-null-content {
    display: none;
    //display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
  }

  .is-null-content img {
    transform: translate(0, 70px);
    margin-top: -70px;
  }

  .is-null-content > p {
    font-size: 24px;
    font-weight: 400;
    line-height: 30px;
    color: #999999;
  }

  .is-null-content a {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    font-weight: 400;
    line-height: 30px;
    color: #3981FF;
    z-index: 10;
  }

  .posts-header {
    font-size: 18px;
    font-weight: 400;
    color: #333333;
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 30px;
    padding: 0 9px 0 20px;
  }

  .posts-header p {
    position: relative;
  }

  .posts-header > p::after {
    content: '';
    display: block;
    position: absolute;
    bottom: -5px;
    left: 0;
    width: 72px;
    height: 2px;
    background: #3981FF;
    border-radius: 5px;
  }

  .posts-header .posts-header-sort {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-size: 16px;
    font-weight: 400;
    color: #999999;
    position: relative;
    overflow: hidden;
  }

  .posts-header .open-sort {
    overflow: visible !important;
  }

  .posts-header .posts-header-sort .sort-active {
    background: #F6F6F6;
    color: #3981FF;
  }

  .posts-header .posts-header-sort svg {
    cursor: pointer;
  }

  .posts-header .posts-header-sort ul {
    position: absolute;
    bottom: -64px;
    left: 0;
    box-shadow: 0 0 6px rgba(0, 0, 0, 0.09);
  }

  .posts-header .posts-header-sort ul li {
    background: #fff;
    width: 108px;
    height: 28px;
    text-align: center;
    line-height: 28px;
    cursor: pointer;
  }

  .post {
    width: 925px;
    margin: 0 auto 29px;
    padding-bottom: 30px;
    border-bottom: solid 1px #EEEEEE;
  }

  .post .post-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  .posts .post-title {
    height: 25px;
    width: 740px;
    font-size: 18px;
    font-weight: 400;
    color: #333333;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .post .post-time {
    font-size: 18px;
    font-weight: 400;
    line-height: 30px;
    color: #999999;
  }

  .post .post-content {
    margin-top: 16px;
    display: flex;
    gap: 20px;
  }

  .post .post-text {
    width: 571px;
    min-height: 30px;
    font-size: 16px;
    font-weight: 400;
    line-height: 30px;
    color: #666666;
  }

  .post .post-image {
    width: 200px;
    height: 110px;
    border-radius: 5px;
    overflow: hidden;
  }

  .post .post-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .post .post-text a {
    font-size: 14px;
    font-weight: 400;
    line-height: 30px;
    color: #3981FF;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
  }

  .post .post-footer {
    margin-top: 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  .post .post-operation {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 68px;
  }

  .post .post-operation div {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    font-size: 16px;
    font-weight: 400;
    line-height: 30px;
    color: #999999;
    cursor: pointer;
  }

  .post .post-del {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 2px;
    font-size: 16px;
    font-weight: 400;
    line-height: 30px;
    color: #999999;
    cursor: pointer;
  }

  .post .post-del:hover {
    color: #E92121;
  }

  .post .post-del:hover svg path {
    fill: #E92121;
  }

  @keyframes turn {
    from {
      transform: rotate(0);
    }
    to {
      transform: rotate(360deg);
    }
  }

  .infinite-scroll {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 10px;
    color: #3981FF;
  }

  .infinite-scroll svg {
    animation: turn 1s infinite;
  }
}
</style>
